<template>
  <div class="app-container">

    <el-drawer
      title="上传凭据"
      :visible.sync="drawer"
      ref="drawer1"
    >
      <el-form ref="form" :model="credentials" label-width="80px">
        <el-form-item label="使用前">
          <el-upload
            action="http://101.33.210.8:8005/eduoss/fileoss"
            list-type="picture-card"
            :on-preview="handlePictureCardPreview"
            :on-success="handSuccess1"
            :on-remove="handleRemove">
            <i class="el-icon-plus"></i>
          </el-upload>
        </el-form-item>
        <el-form-item label="使用后">
          <el-upload
            action="http://101.33.210.8:8005/eduoss/fileoss"
            list-type="picture-card"
            :limit="1"
            :on-preview="handlePictureCardPreview"
            :on-success="handSuccess2"
            :on-remove="handleRemove">
            <i class="el-icon-plus"></i>
          </el-upload>
        </el-form-item>

        <el-form-item label="备注">
          <el-input v-model="credentials.describe" placeholder=" 示例：不慎弄坏投影仪"/>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="save">保存</el-button>
          <el-button  @click="drawer = false">取消</el-button>
        </el-form-item>
      </el-form>

    </el-drawer>

    <el-table
      :data="list"
      border
      fit
      highlight-current-row
    >

      <el-table-column prop="roomName" label="会议室名称" />

      <el-table-column type="date" prop="cover" label="日期" sortable >
        <template   slot-scope="scope" >
          {{scope.row.sliceDate.substring(0,10)}}
        </template>
      </el-table-column>

      <el-table-column  prop="beginTime" label="开始时间"/>

      <el-table-column  prop="endTime" label="结束时间"/>

      <el-table-column  prop="commit" label="申请理由"/>

      <el-table-column type="status" prop="state" label="状态" sortable >
        <template   slot-scope="scope" >
          <el-tag type="success" v-if="scope.row.state==1">正常</el-tag>
          <el-tag type="info" v-else>取消</el-tag>
        </template>

      </el-table-column>

      <el-table-column type="date" prop="gmtCreate" label="申请时间" sortable >
        <template   slot-scope="scope" >
          {{scope.row.gmtCreate.substring(0,10)}}
        </template>
      </el-table-column>

      <el-table-column label="上传凭据" width="200" align="center" prop="sliceId">
        <template slot-scope="scope">
          <el-button v-if="scope.row.credentials == 0" type="danger" size="mini" icon="el-icon-edit" @click="openUpload(scope.row.id,scope.row.userId)">未上传</el-button>
          <el-button  v-else-if="scope.row.credentials == 1"type="info" size="mini" disabled>审核中</el-button>
          <el-button v-else-if="scope.row.credentials == 2" type="success" size="mini"  disabled>审核成功</el-button>
          <el-button v-else-if="scope.row.credentials == 3" type="danger" size="mini"  disabled>审核不通过</el-button>
        </template>
      </el-table-column>

      <el-table-column label="操作" width="200" align="center" prop="sliceId">
        <template slot-scope="scope">
          <el-button v-if="scope.row.state == 1" type="danger" size="mini" icon="el-icon-edit" @click="openCancel(scope.row.id)">取消预约</el-button>
          <el-button v-else type="info" size="mini"  disabled>取消预约</el-button>
        </template>
      </el-table-column>

    </el-table>
  </div>
</template>
<script>
import userClient from "~/api/userClient";
export default{
  data(){
    return{
      list:[],
      drawer:false,
      credentials:{
        reservationId:"",
        userId:"",
        describe1:"",
        beforeImg:"",
        afterImg:"",
      }
    }
  },
  created(){
    this.listByUserId()
  },
  methods:{

    handleRemove(file, fileList) {
      this.dialogImageUrl = file.url;
      /*console.log(file, fileList);*/
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    handSuccess1(response){
      this.credentials.beforeImg = response.data.url;
    },
    handSuccess2(response){
      this.credentials.afterImg = response.data.url;
    },

    listByUserId(){
      userClient.getByUserId()
        .then(response=>{
          this.list = response.data.data.list
        })
    },
    openCancel(id) {
      this.$confirm('此操作将取消预约, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        userClient.cancel(id)
          .then(response=>{
            this.$message({
              type: 'success',
              message: '取消预约成功!'
            });
            this.listByUserId()
          })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消'
        });
      });
    },
    openUpload(id,userId){
      this.drawer = true
      this.credentials.reservationId = id
      this.credentials.userId = userId
    },
    save(){
      this.credentials.reservationId =
      userClient.uploadCredentials(this.credentials)
      .then(response=>{
        this.$message({
          type:"success",
          message:"上传成功"
        })
        this.drawer = false
        this.listByUserId()
      })
    }
  },
}
</script>
<style>

</style>
